<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>V-if</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <div id="vif">
    <h1 v-if="ok">你隐藏了我就显示</h1>
    <h2 v-else>你显示我就隐藏</h2>
  <template v-if="template">
    <h2>Title</h2>
    <ol>
      <li>list1</li>
      <li>list2</li>
    </ol>
  </template>
  <p v-show="show">我是v-show,只是切换显示和隐藏</p>
  </div>
  <script type="text/javascript">
  var vif = new Vue({
    el: "#vif",
    data: {
      ok: false,
      template: true,
      show:true
    }
  });
  </script>
</body>

</html>
